<template>
  <div class="empty-tip-contain" :class="absClass" :style="{marginTop: marginTB, marginBottom: marginTB}">
    <div>
      <slot name="img">
        <img :src="chooseImg()" class="empty-img">
      </slot>
    </div>
    <div class="def-empty-tip">
      <slot>
        <span>暂无数据</span>
      </slot>
    </div>
    <div class="tip-button">
      <slot name="button">
        <!--按钮-->
      </slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "EmptyTip",
    props: [
      'type',
      'imgUrl'
    ],
    data() {
      return {
        defaultSVG: require('../../../assets/empty/empty1.svg'),
        simpleSVG: require('../../../assets/empty/empty2.svg'),
        absClass: null,
        marginTB: 0
      }
    },
    mounted() {
      this.checkParentPosition();
    },
    methods: {
      checkParentPosition() {
        if(this.$el.parentElement.style.position
          && ['absolute','relative'].indexOf(this.$el.parentElement.style.position)>-1) {
          this.absClass = 'abs-empty-tip';
        } else {
          let ph = this.$el.parentElement.offsetHeight;
          let th = this.$el.offsetHeight;

          this.absClass = null;
          this.marginTB = (ph-th)/2+'px';
        }
      },
      /**
       * 初始化图片
       * @returns {*}
       */
      chooseImg() {
        let imgObj;
        if(this.imgUrl) {
          imgObj = this.imgUrl;
        } else if(this.type) {
          switch (this.type) {
            case 'simple':
              imgObj = this.simpleSVG;
              break;
            default:
              imgObj = this.defaultSVG;
          }
        } else
          imgObj = this.defaultSVG;

        return imgObj;
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .empty-tip-contain {
    text-align: center;
    div{
      line-height: normal;
    }
    .empty-img {
      max-width: 100px;
    }
    .def-empty-tip {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.25);
      margin-bottom: 10px;
    }
    .tip-button {
    }
  }
  .abs-empty-tip {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
  }
</style>
